<template>
  <div class="execution">
    <basic-container>
      <avue-crud
        ref="crud"
        :data="tableData"
        :option="tableOption"
        :page="page"
        :permission="permissionList"
        :table-loading="tableLoading"
        @on-load="getList"
        @search-change="searchChange"
        @refresh-change="refreshChange"
        @size-change="sizeChange"
        @current-change="currentChange"
        @row-update="handleUpdate"
        @row-save="handleSave"
        @row-del="rowDel"
      >
      </avue-crud>
    </basic-container>
  </div>
</template>

<script>
import {
  addItemObj,
  delItemObj,
  fetchItemList,
  fetchList,
  putItemObj,
} from "@/api/admin/dict";
import { mapGetters } from "vuex";

export default {
  name: "charm",
  data() {
    return {
      searchForm: {},
      tableData: [],
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 20, // 每页显示多少条
      },
      tableLoading: false,
      tableOption: {
        border: true,
        index: true,
        indexLabel: "序号",
        stripe: true,
        menuAlign: "center",
        align: "center",
        dialogDirection: "rtl",
        searchMenuSpan: 6,
        column: [
          {
            search: true,
            type: "select",
            label: "类型",
            prop: "label",
            dicUrl: `/dict/item/page?current=1&size=999&dictId=35`,
            props: {
              label: "label",
              value: "label",
            },
            dicFormatter: (data) => {
              return data.data.records;
            },
            rules: [
              {
                required: true,
                message: "请选择类型",
                trigger: "change",
              },
            ],
          },
          {
            label: "图片",
            prop: "value",
            type: "upload",
            action: "/fastfile/upload/szgk-1256675456",
            listType: "picture-img",
            dataType: "string",
            limit: 1,
            propsHttp: {
              res: "data",
              url: "kpath",
            },
            span: 24,
            rules: [
              {
                required: true,
                message: "请选择图片",
                trigger: "change",
              },
            ],
          },
          {
            type: "input",
            label: "排序号",
            prop: "sort",
            rules: [
              {
                required: true,
                message: "请输入排序号",
                trigger: "blur",
              },
            ],
          },
        ],
      },
      id: "",
    };
  },
  computed: {
    ...mapGetters(["permissions"]),
    permissionList() {
      return {
        addBtn: this.vaildData(this.permissions.cover_add, false),
        delBtn: this.vaildData(this.permissions.cover_del, false),
        editBtn: this.vaildData(this.permissions.cover_edit, false),
      };
    },
  },
  methods: {
    getList(page, params) {
      this.tableLoading = true;
      fetchList(
        Object.assign(
          {
            current: 1,
            size: 100,
            type: "cover_img",
          },
          params,
          this.searchForm
        )
      )
        .then((response) => {
          this.id = response.data.data.records[0].id;
          fetchItemList({
            current: page.currentPage,
            size: page.pageSize,
            dictId: response.data.data.records[0].id,
          }).then((res) => {
            this.tableData = res.data.data.records;
            this.page.total = res.data.data.total;
            this.tableLoading = false;
          });
        })
        .catch(() => {
          this.tableLoading = false;
        });
    },
    rowDel: function (row, index) {
      this.$confirm("是否确认删除", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          return delItemObj(row.id);
        })
        .then((data) => {
          this.$message.success("删除成功");
          this.getList(this.page);
        });
    },
    handleUpdate: function (row, index, done, loading) {
      let isHas = this.tableData.some((t) => {
        return t.label == row.label;
      });
      console.log(isHas, "isHas");
      if (isHas) {
        this.$message.error("每种类型只能添加一条数据");
        loading();
        return;
      } else {
        putItemObj(row)
          .then((data) => {
            this.$message.success("修改成功");
            done();
            this.getList(this.page);
          })
          .catch(() => {
            loading();
          });
      }
    },
    handleSave: function (row, done, loading) {
      console.log(row, "row");
      let obj = {
        dictId: this.id,
        type: "cover_img",
        description: "板块封面图",
        value: row.value,
        label: row.label,
        sort: row.sort,
      };
      let isHas = this.tableData.some((t) => {
        return t.label == row.label;
      });
      console.log(isHas, "isHas");
      if (isHas) {
        this.$message.error("每种类型只能添加一条数据");
        loading();
        return;
      } else {
        addItemObj(obj)
          .then((data) => {
            console.log(data, "data");
            if (data.status == 200) {
              this.$message.success("添加成功");
              done();
              this.getList(this.page);
            }
          })
          .catch(() => {
            loading();
          });
      }
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    currentChange(current) {
      this.page.currentPage = current;
    },
    searchChange(form, done) {
      this.searchForm = form;
      this.page.currentPage = 1;
      this.getList(this.page, form);
      done();
    },
    refreshChange() {
      this.getList(this.page);
    },
  },
};
</script>
